Skip to content

feat: white-label branding system with theming and CLI setup#116

Draft
erdemyerebasmaz wants to merge 13 commits intomainfrom
feat/white-label
Draft

feat: white-label branding system with theming and CLI setup#116
erdemyerebasmaz wants to merge 13 commits intomainfrom
feat/white-label

Conversation

@erdemyerebasmaz
Copy link
Contributor

@erdemyerebasmaz erdemyerebasmaz commented Mar 5, 2026

Summary

  • Single config file (src/config/brand.ts) controls the entire app's look and feel — name, colors, fonts, logo
  • Colors and fonts are applied at runtime as CSS variables, fully compatible with Tailwind opacity classes
  • Splash screen, meta tags, and font loading are set at build time — no flash of unstyled content
  • npm run brand:setup wizard walks you through customization and generates app icons
  • Supports any Google Fonts family
  • App version is read from package.json automatically

Integrator workflow

cp ~/logo.png public/assets/logo.png   # place your logo
npm run brand:setup                    # run the interactive wizard
npm run dev                            # preview your app

Re-run npm run brand:setup -- --gen to regenerate icons from existing config.

Future improvements

  • Generate social sharing preview image and iOS home screen icon from logo
  • Simplify theme customization:
    • Auto-generate full color palette from 3 base colors (primary, accent, background) instead of requiring 12 individual values
    • Extract suggested colors from the logo image
    • Derive a light mode variant automatically from the same base colors
  • Render brand logo in the splash screen (currently text-only)

Test plan

  • App loads with correct brand colors, fonts, and splash screen
  • Changing brand.theme.colors.primary updates all accents (buttons, spinners, glows, opacity variants)
  • Changing brand.theme.fonts.display updates UI font
  • npm run brand:setup generates icons + manifest from logo
  • npm run build produces correct meta tags and font URL in index.html
  • npx tsc --noEmit passes

🤖 Generated with Claude Code

@vercel
Copy link

vercel bot commented Mar 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
breez-glow-web Ready Ready Preview, Comment Mar 19, 2026 10:49am
breez-sdk-spark-example Ready Ready Preview, Comment Mar 19, 2026 10:49am
savage-glow-web Ready Ready Preview, Comment Mar 19, 2026 10:49am

@erdemyerebasmaz erdemyerebasmaz changed the title feat: centralize brand configuration for white-label support feat: white-label branding system with theming and CLI setup Mar 5, 2026
@erdemyerebasmaz erdemyerebasmaz linked an issue Mar 5, 2026 that may be closed by this pull request
@erdemyerebasmaz erdemyerebasmaz marked this pull request as draft March 17, 2026 14:54
erdemyerebasmaz and others added 13 commits March 19, 2026 13:48
Create src/config/brand.ts with all brand values (name, logo, tagline,
icons, domains, log prefixes). Replace hardcoded brand strings across
15 files with brand.* imports. To white-label the app, only brand.ts
and static assets need to change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Simplify brand.ts: 17 fields → 6 core + theme object, derive the rest
- Remove "Wallet" from all derived strings
- Add theme.colors and theme.fonts to brand config
- Create theme injection system (CSS variables from brand config at startup)
- Use Tailwind RGB variable pattern for opacity utility support (70+ usages)
- Fix all hardcoded brand colors in SVGs and components
- Add Vite plugin for build-time HTML brand injection (splash, meta tags, fonts)
- Add `npm run brand:setup` CLI to generate icons + manifest from brand config
- Rename all assets to generic filenames (no brand prefix)
- Fix DM Sans font bug in index.css

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace basic icon-generation script with full interactive CLI wizard
that asks for brand name, colors, fonts and generates brand.ts, PWA
icons, and manifest.json. Supports --gen flag for non-interactive
regeneration from existing brand.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
More descriptive export name for the slug-based identifiers used
across the app. Brand.ts template now includes a header noting it
is auto-generated by the wizard.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Version is an app concern, not brand identity. Use Vite's `define`
to inject __APP_VERSION__ from package.json at build time.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Only auto-derive primaryLight/accentLight via lightenHex when the
user changes the base color. When keeping the default, use the
curated DEFAULTS value instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Warns if no logo exists at public/assets/logo.png and asks the user
to confirm before continuing. Defaults to N so they can place the
logo first.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Clearer intro explaining bracket defaults, friendlier section
headers, and more descriptive prompt labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace while(true) with proper loop condition in askColor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
esbuild doesn't support `import ... with { type: 'json' }` syntax.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make it dead simple to white label

1 participant